<template>
    <div class="app-container" v-loading="pageLoading">
        <div>
        <el-input v-model="searchKeyword" @keyup.enter.native="handleSearch" placeholder="请输入用户名" style="width:30% ; padding-right:10px"></el-input>
        <el-button type="primary" @click="handleSearch">搜索</el-button> 
        <el-button type="primary" @click="refreshCacheUsers">刷新用户缓存</el-button> 
    </div>
    <div style="margin-top:30px">
        <el-table :data="userList" border>
          <el-table-column prop="userName" align="center" label="账号"></el-table-column>
          <el-table-column prop="name" align="center" label="用户名"></el-table-column>
          <el-table-column prop="roleName" align="center" label="权限" sortable></el-table-column>
          <el-table-column prop="status" align="center" label="状态">
              <template slot-scope="scope">
                  <el-tag :type="scope.row.status === 0 ? 'success' : 'danger'"
                disable-transitions
            >{{ scope.row.status === 0 ? '正常' : '禁用' }}</el-tag>
              </template>
          </el-table-column>
          <el-table-column prop="time" align="center" label="创建时间"></el-table-column>
          <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                  <el-button type="primary" @click="handleEdit(scope)">修改</el-button>
              </template>
          </el-table-column>
        </el-table>
    </div>
    <el-dialog
        :title="dialogType === 'edit' ? '修改' : '增加'"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        @closed="dialogCloseCallBack"
        width="30%"
        >
        <div v-loading="loading">
            <el-form ref="userForm" :model="editUser" :rules="rules" label-width="100px">
              <el-form-item label="名称" prop="name">
                  <el-input v-model="editUser.name" placeholder="请输入名称"></el-input>
              </el-form-item>
              <el-form-item label="角色" prop="roleId">
                  <el-select
                    v-model="editUser.roleId"
                    placeholder="请选择角色"
                    style="width: 100%"
                    >
                    <el-option
                        v-for="item in roleList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                    </el-select>
              </el-form-item>
              <el-form-item label="用户状态" prop="status">
                      <el-switch
                        v-model="editUser.status"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        ></el-switch>
              </el-form-item>
            </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="danger" @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="onSubmit" :loading="submitLoading">确 定</el-button>
        </span>
    </el-dialog>
    </div>

</template>

<script >
import { deepClone } from "@/utils";
import { getAllUser, modUser, refreshCacheUsers } from "@/api/user";
import { getRoles } from "@/api/role";
import BackToTop from "@/components/BackToTop"
export default {
    name: 'SystemUser',
    components:{
      BackToTop
    },
    data() {
        return {
            pageLoading:false,
            dialogType:'new',
            userList:[],
            userListCopy:[],
            searchKeyword: '',
            editUser: {
                name: "",
                roleId: null,
                id: null,
                status: true,
            },
            rules:{
                name:[{ required: true, message: '请输入名称', trigger: 'blur' }],
                roleId:[{ required: true, message: '请选择角色', trigger: 'change' }]
            },
            roleList:[],
            dialogVisible:false,
            submitLoading:false,
            loading:false,
        }
    },
    mounted() {
        this.getAllUser()    
    },
    methods: {
        async getAllUser(){
            this.pageLoading = true;
            try{
                let res = await getAllUser();
                this.userList = res.data ? deepClone(res.data) : [];
                this.userListCopy = res.data ? deepClone(res.data) : [];
                this.pageLoading = false;
            }catch(err){dw
                this.pageLoading = false;
            }
        },
        handleSearch(){
            let keyWord = this.searchKeyword;
            this.userList = this.userListCopy.filter(
                (route) => route.name.indexOf(keyWord) != -1 || route.roleName.indexOf(keyWord) != -1 
            );
        },
        async handleEdit(scope){
            this.loading = true;
            this.dialogType = "edit";
            this.dialogVisible = true;
            let row = scope.row;
            try {
                let res = await getRoles(); 
                this.roleList = res.data || [];
                this.editUser = {
                name: row.name,
                roleId: row.roleId,
                id: row.id,
                status: row.status == 0 ? true : false,
                };
                this.loading = false; 
            } catch (err) {
                this.loading = false;
            }
        },  
        dialogCloseCallBack() {
            this.editUser = {
                name: "",
                roleId: null,
                id: null,
                status: true,
            };
            this.$refs["userForm"].resetFields();
        },  
        async refreshCacheUsers(){
            this.pageLoading = true
            try{
                await refreshCacheUsers()
                this.pageLoading = false
                this.$message({
                    type: "success",
                    message: "刷新成功",
                });
                this.getAllUser()
            }catch{
                this.pageLoading = false
            }
        },
        onSubmit(){
        this.$refs.userForm.validate((valid) => {
            if(valid){
                this.submitLoading = true;
                let params = {
                    name: this.editUser.name,
                    roleId: this.editUser.roleId,
                    id: this.editUser.id,
                    status: this.editUser.status ? 0 : 1,
                }
                modUser(params).then(() => {
                    this.dialogVisible = false;
                    this.submitLoading = false;
                    this.$message({
                        type: "success",
                        message: "修改成功",
                    });
                    this.getAllUser();
                }).catch(err)(
                    this.submitLoading = false
                )
            }
        })
        }  
    },
};
</script>
<style  lang="scss" scoped>

</style>